<template>
  <div >
    <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
    <div class="panel-container">
      <van-row type="flex" align="center" justify="space-between" @click="handleClick">
        <van-col><b class="L-text L-bold-text">{{currentCondition}}{{itemdata.stitle}}</b></van-col>
        <van-col style="text-align:right">
          <!-- {{showtitle}} -->
          <van-icon name="arrow" />
        </van-col>
      </van-row>
      <van-row type="flex" align="center">
        <van-col span="12">
          <div class="echart-box" ref="chart"></div>
        </van-col>
        <van-col span="12">
          <div v-for="(coldata, index) in completedata" v-show="index !== 2" :key="index" style="line-height:30px">
            <span style="font-size:14px;margin-right:5px">{{ coldata[0] }}:</span>
            <span style="font-size:14px">{{ coldata[1] }} </span>
            <span style="font-size:14px">{{ coldata[2] }}</span>
             <!-- <span style="font-size:14px">140 万元 </span>
            <span style="font-size:14px">完成:98 万元</span> -->
          </div>
        </van-col>
      </van-row>
    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { apiConfigurable } from "@/request/api/api";

const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata:{
    type:Object,
    default:{}
  }
})

const chart = ref(null)

onMounted(() => {
  currentCondition.value = props.itemdata.condition
  completedata.value = props.itemdata.completedata
  initChart();
  
  
});
const showtitle = ref("");
const show = ref(false);
const tempindex = ref(0);
const itemid = ref("");
const itemname = ref("");
const actions = [
  { name: "本年", value: "myyear" },
  { name: "上年", value: "mypreyear" },
  { name: "本季度", value: "myquarter" },
  { name: "上季度", value: "myprequarter" },
  { name: "本月", value: "mymonth" },
  { name: "上月", value: "mypremonth" },
  { name: "本周", value: "myweek" },
  { name: "上周", value: "mypreweek" },
  { name: "本日", value: "myday" },
  { name: "上日", value: "mypreday" },
];
const currentCondition = ref("")
const completedata = ref([])

function initChart() {
  // const value = (Math.random(0, 1) * 100).toFixed(0);
  // console.log("completedata",completedata.value)
  const value = completedata.value[2][1];

  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);

  const options = {
    title: {
      text: `${value}%`, // 圆环中间数字
      textStyle: {
        color: "#222222",
        fontSize: 20,
      },
      subtext: "",
      subtextStyle: {
        color: "#222222",
      },
      itemGap: 10,
      left: "center",
      top: "center",
    },
    angleAxis: {
      max: 100, // 总数
      clockwise: true, // 逆时针
      // 隐藏刻度线
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      type: "category",
      // 隐藏刻度线
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    polar: {
      center: ["50%", "50%"],
      radius: "100%", // 图形大小
    },
    series: [
      {
        type: "bar",
        data: [
          {
            name: "交易结果成功数",
            value: value,
            itemStyle: {
              normal: {
                color: "#409EFF",
                // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ // 渐变色，如果正常一个颜色的话，直接写 color：色值；
                //   {
                //     offset: 0,
                //     color: '#0091ff',
                //   },
                //   {
                //     offset: 1,
                //     color: '#cfe8fc',
                //   },
                // ]),
              },
            },
          },
        ],
        coordinateSystem: "polar",
        roundCap: false,
        barWidth: 12,
        barGap: "-100%",
        z: 2,
      },
      {
        // 底色环
        type: "bar",
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#e4e4e4",
            },
          },
        ],
        coordinateSystem: "polar",
        roundCap: false,
        barWidth: 12,
        barGap: "-100%",
        z: 1,
      },
    ],
  };

  myChart.setOption(options);

}

function onSelect(item) {
  show.value = false;
  currentCondition.value = item.name;
  
  getData(item.value, item.name);
}
// function showComplete(item) {
//   router.push({
//     name: "showcomplete",
//     query: { item: this.alldata, currentdep: this.depvalue },
//   });
// }

function handleClick() {
  show.value = true;
}

function getData(value, name) {
  const {itemdata} = props
  let data = {
    itemid: itemdata.itemid,
    condition: value,
    // currentdep: this.depvalue,
  };

  let url = "extractdata.getdata.do";
  if (itemdata.sname === "complete") {
    url = "completedata.getcompletedata.do";
  } else if (itemdata.sname === "twobarandline") {
    url = "homepage.gettwobarandline.do";
  } else if (itemdata.sname === "provinceproduct") {
    url = "homepage.getprovinceproduct.do";
  }
  apiConfigurable(url,data).then((res) => {
      // let alldata = this.alldata;

      return 
     
      for (let i = 0; i < alldata.length; i++) {
        if (alldata[i].itemid === this.itemid) {
          if (this.itemname === "complete") {
            this.alldata[i].completedata = res.data;
          } else if (this.itemname === "twobarandline") {
            this.alldata[i].xja = res.data.xja;
            this.alldata[i].bararr1 = res.data.bararr1;
            this.alldata[i].bararr2 = res.data.bararr2;
            this.alldata[i].line = res.data.line;
            this.alldata[i].title = res.data.title;
          } else if (this.itemname === "provinceproduct") {
            console.log(this.adddata);
            this.alldata[i].xja2 = res.data.xja2;
            this.alldata[i].xja1 = res.data.xja1;
            this.alldata[i].bararr1 = res.data.bararr1;
            this.alldata[i].bararr2 = res.data.bararr2;
            this.alldata[i].line = res.data.line;
            this.alldata[i].title = res.data.title;
          } else {
            this.alldata[i].arrdata = res.data;
          }
          this.alldata[i].condition = name;
        }
      }
    })
}
</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 150px;
  height: 150px;
   /* border: 3px solid pink; */
   /* margin: 20px auto; */
}
</style>
